<template>
  <div class="keyindicators_page">
    <div>
      <p class="keyindicatorstabs" v-for="(item,index) in tabslist" :key="item.pipeId" @click="taptabs(item.pipeCode,index)" :class="activenum==index?'activenum':''">{{item.pipeName}}</p>
    </div>
    <div class="visitor-track-container">
      <div class="items_box">
        <div class="items_box_con">
          <p v-for="(item, index) in items" :key="index">
            <span>{{ item.value }}</span>
            <span>{{ item.key }}</span>
          </p>
        </div>
      </div>
      <div
        v-for="(item, index) in lists"
        :key="index"
        class="content"
        :class="index % 2 == 0 ? 'oddrow' : 'everow'"
      >
        <div
          v-if="index + 1 < lists.length"
          :class="
            index % 2 == 0
              ? lists[index].length == 6
                ? 'oddrowline'
                : ''
              : lists[index].length == 6
              ? 'everowline'
              : ''
          "
        ></div>
        <div
          v-for="(itemc, indexc) in item"
          :key="indexc"
          class="row_box"
        >
          <div
            class="line_row"
            :class="
              lists[index].length == 6
                ? index + 1 >= lists.length
                  ? index % 2 == 0
                    ? 'line_row4'
                    : 'line_row5'
                  : ''
                : index % 2 == 0
                ? 'line_row2'
                : 'line_row3'
            "
          ></div>
          <div class="con">
            <img
              src="@/assets/images/pipe_icon_red.png"
              style="width: 24px; height: 24px"
            />
            <p style="margin-top: 4px">{{ itemc.yardName }}</p>
            <div class="con_valuebox">
              <p
                v-for="(itemx, indexx) in itemc.children"
                :key="indexx"
                class="con_value"
              >
                {{ itemx.attributeName}}：{{itemx.value}}{{itemx.unit}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { dataStatisticsList,getdataStatisticsDetail,getYardCode} from "@/api/statistics/index";
export default {
  data() {
    return {
      activenum:0,
      tabslist:[],
      items: [
        { value: "4678万m", key: "实时管存" },
        { value: "4.8Mpa", key: "首站压力" },
        { value: "4.8Mpa", key: "末站压力" },
        { value: "4.8Mpa", key: "平均压力" },
        { value: "37℃", key: "首站温度" },
        { value: "37℃", key: "末站温度" },
        { value: "37℃", key: "平均温度" },
      ],
      lists: [
        // {
        //   children: [
        //     {
        //       title: "遵义首站",
        //       children: [
        //         { value: "出站压力:5.9MDa" },
        //         { value: "出站温度:37'C" },
        //         { value: "今日累计:124万Nm3" },
        //       ],
        //     },
        //     { title: "同空#1", children: [{ value: "餄≠襟捂敢累计:124万Nm" }] },
        //     { title: "阀空#2" },
        //     { title: "阀空#3" },
        //     { title: "阿空#4" },
        //     { title: "湄潭站" },
        //   ],
        // },
        // {
        //   children: [
        //     { title: "标题" },
        //     { title: "标题" },
        //     { title: "标题" },
        //     { title: "标题" },
        //     { title: "标题" },
        //     { title: "标题" },
        //   ],
        // },
      ],
    };
  },
  mounted(){
    dataStatisticsList().then(response => {
       if(response.code==200){
        this.tabslist=response.data
        this.getdetail(response.data[0].pipeCode)
       }
      });
  },
  computed: {},
  methods: {
    // 分组
    chunkArray(array, chunkSize) {
      let result = [];
      for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
      }
      return result;
    },
    getdetail(pipeCode){
      getdataStatisticsDetail(pipeCode).then(response => {
       if(response.code==200){
        // 获取子项
        response.data.forEach(element => {
         element.children= this.getYardCode(element.yardCode)
        });
       let chunkedArray = this.chunkArray(response.data, 6);
        this.lists=chunkedArray
       }
      });
    },
    getYardCode(yardCode){
      getYardCode(yardCode).then(response => {
       if(response.code==200){
       let temp1=0
       let temp2=0
       response.data.map((res)=>{
        if(res.name=='进站总压力'){
            temp1+=res.value
            this.items[1].value=res.value
        }
        if(res.name=='出站总压力'){
           temp1+=res.value
           this.items[2].value=res.value
        }
        if(res.name=='进站温度'){
           temp2+=res.value
           this.items[4].value=res.value
        }
        if(res.name=='出站温度'){
           temp2+=res.value
           this.items[5].value=res.value
        }
       })
       this.items[3].value=temp1/2
       this.items[6].value=temp2/2
        return response.data
       }
      });
    },
    taptabs(pipeCode,index){
        this.activenum=index
        this.getdetail(pipeCode)
      }
  },
};
</script>
<style lang="scss">
p {
  margin: 0;
  padding: 0;
}
.keyindicators_page {
  height: calc(100% - 58px);
  padding: 14px 12px;
  display: flex;
  border: 2px solid rgba(31, 198, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(2, 68, 102, 0.3),
    rgba(2, 60, 89, 0.3),
    #01121b 100%
  );
}
.keyindicatorstabs {
  max-width: 240px;
  padding: 0 7px;
  height: 32px;
  line-height: 32px;
  background: rgba(57, 205, 255, 0.12);
  border: 1px solid rgba(31, 198, 255, 0.3);
  color: rgba(180, 192, 204, 1);
  font-size: 16px;
  margin-right: 101px;
  margin-bottom: 10px;
  cursor: pointer;
  white-space: nowrap;      /* 保持文本在一行，不换行 */
  overflow: hidden;         /* 隐藏超出容器的内容 */
  text-overflow: ellipsis;  /* 超出部分显示为省略号 */
}
.activenum,.keyindicatorstabs:hover{
   background:  linear-gradient(180deg, rgba(31, 198, 255, 0), rgba(31, 198, 255, 1), rgba(31, 198, 255, 0)) 1 1;
  border: 1px solid rgba(31, 198, 255, 1);
  color: white;
}
.visitor-track-container {
  min-width: 1270px;
  background: #041027;
  font-size: 14px;
  .items_box {
    margin-bottom: 20px;
    .items_box_con {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 48px;
      p {
        border: 1px solid #072647;
        margin-left: 2px;
        height: 48px;
        span {
          display: block;
          padding: 0 20px;
          text-align: center;
        }
        span:nth-of-type(1) {
          margin-top: 4px;
          height: 18px;
          color: #27bf8b;
        }
        span:nth-of-type(2) {
          height: 18px;
          color: #63768d;
        }
      }
    }
  }
  .content {
    position: relative;
    min-height: 200px;
    margin-left: 20px;
    margin-right: 40px;
    margin-bottom: 20px;
    .oddrowline {
      position: absolute;
      top: 12px;
      right: 0;
      height: calc(100% + 20px);
      width: 2px;
      background: #39738e;
    }
    .everowline {
      position: absolute;
      top: 12px;
      left: 0;
      height: calc(100% + 20px);
      width: 2px;
      background: #39738e;
    }
    .row_box {
      width: 16.66%;
      position: relative;

      .line_row {
        position: absolute;
        top: 12px;
        left: 0;
        width: 100%;
        background: #39738e;
        height: 2px;
      }
      .con {
        position: relative;
        z-index: 9;
        text-align: center;
        margin-right: 20px;
        color: white;
        .con_valuebox {
          margin-top: 10px;
        }
        img {
          background: white;
        }
        .con_value {
          border: 1px solid #041924;
          background: #000b19;
          color: #093e5b;
          line-height: 34px;
          text-align: left;
          text-indent: 7px;
          font-size: 13px;
        }
      }
    }
    .row_box:last-child .line_row2,
    .row_box:last-child .line_row4 {
      width: 50%;
    }
    .row_box:first-child .line_row3,
    .row_box:first-child .line_row5 {
      left: 50%;
      width: 50%;
    }
  }
  .oddrow {
    display: flex;
    justify-content: flex-start;
  }
  .everow {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
